import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import { ElLoading } from 'element-plus'
import MiConfirm from '@/components/MiConfirm/MiConfirm'


const routes: Array<RouteRecordRaw> = [
  { path: '/', redirect: '/home' },
  {
    name: 'Login', path: '/login', component: () => import('../views/Login/Login.vue'), meta: { name: 'Login' },
    beforeEnter: (to, from, next) => {
      if (from.meta.name) {
        // 弹窗
        to.meta.name = from.meta.name
        next()
      } else {
        next()
      }
    }
  },
  { name: 'Home', path: '/home', component: () => import('../views/Home/Home.vue') },
  { name: 'Category', path: '/category', component: () => import('../views/Category/Category.vue') },
  { name: 'ProductList', path: '/productlist', component: () => import('../views/ProductList/ProductList.vue'), meta: { name: '/productlist' } },
  { name: 'Cart', path: '/cart', component: () => import('../views/Cart/Cart.vue'), meta: { name: '/cart' } },
  {
    name: 'Profile', path: '/profile', component: () => import('../views/Profile/Profile.vue'), meta: { name: '/profile' }
  },
  {
    name: 'Address', path: '/address', component: () => import('../views/Address/Address.vue'),
    beforeEnter: async (to, from, next) => {
      if (!sessionStorage.getItem('token')) {
        next('/login')
      } else {
        next()
      }
    }
  },
  { name: 'Settlement', path: '/settlement', component: () => import('@/views/Settlement/Settlement.vue') },
  {
    name: 'Order', path: '/order', component: () => import('@/views/Order/Order.vue'), meta: { name: '/order' },
    beforeEnter: async (to, from, next) => {
      if (!sessionStorage.getItem('token')) {
        next('/login')
      } else {
        next()
      }
    }
  },
  {
    name: 'ConfirmOrder', path: '/confirmorder/:id', component: () => import('@/views/ConfirmOrder/ConfirmOrder.vue'),
    beforeEnter: async (to, from, next) => {
      if (!sessionStorage.getItem('token')) {
        next('/login')
      } else {
        next()
      }
    }
  },
  {
    name: 'Details', path: '/detials/:id', component: () => import('@/views/Details/Details.vue')
  },
  { name: 'ceshi', path: '/ceshi', component: () => import('../components/MiConfirm/MiConfirm.vue') }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

router.beforeEach(async (to, from, next) => {
  // console.log(to, from)
  console.log(from.meta.name)
  if (!sessionStorage.getItem('token') && to.name === 'Login') {
    await MiConfirm({})
    const loadingInstance = ElLoading.service({ text: "loading..", background: 'rgba(255,255,255,0.5)' })
    await new Promise((resolve: any): void => {
      setTimeout((): void => {
        loadingInstance.close()
        next()
        resolve()
      }, 500)
    })
  } else {
    if (from.name === 'Login') {
      if (from.meta.name !== 'Login') {
        next((from.meta.name) as string)
        from.meta.name = 'Login'
      } else {
        next()
      }
    } else {
      const loadingInstance = ElLoading.service({ text: "loading..", background: 'rgba(255,255,255,0.5)' })
      await new Promise((resolve: any): void => {
        setTimeout((): void => {
          loadingInstance.close()
          resolve()
          next()
        }, 500)
      })
    }

  }
})


export default router
